<template>
  <el-row style="margin-top:20px;">
    <el-form ref="searchFormRef" :inline="true" :model="state.searchForm">
      <el-form-item label="规格名称" prop="title">
        <el-input style="width: 200px;" v-model="state.searchForm.title" placeholder="规格名称" clearable/>
      </el-form-item>
      <el-form-item label="CPU核数" prop="vcpu">
        <el-input style="width: 100px;" v-model="state.searchForm.vcpu" placeholder="CPU核数" clearable/>
      </el-form-item>
      <el-form-item label="内存" prop="memory">
        <el-input style="width: 100px;" v-model="state.searchForm.memory" placeholder="内存" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doSearch">搜 索</el-button>
        <el-button type="primary" @click="doResetSearchForm" plain>重 置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="state.tableData" border style="width: 100%" v-loading="state.isLoading"
              v-per2="['applynet-list','get']">
      <el-table-column label="序号">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column sortable prop="order_id" label="工单号"/>
      <el-table-column sortable prop="resource_name" label="资源名称"/>
      <el-table-column sortable prop="net_location_text" label="网络位置"/>
      <el-table-column sortable prop="security_domain_text" label="安全分区"/>
      <el-table-column sortable prop="ipaddress" label="IP地址"/>
      <el-table-column sortable prop="gateway" label="网关"/>
      <el-table-column sortable prop="vlan_id" label="VlanID"/>
    </el-table>
    <MinePager v-per2="['applynet-list','get']" :pager="state.pager"/>
  </el-row>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import _axios from "@/plugin/axios.js";
import {ElMessage} from "element-plus";
import MinePager from "@/components/MinePager.vue";
import {hasPermission2} from "@/stores/permission.js";


const searchFormRef = ref(null)
const ruleForm = ref(null)
const state = reactive({
  isLoading: false,
  tableData: [],
  pager: {
    currentPage: 1,
    totalCount: 0,
    perPageSize: Number(localStorage.getItem("pageSize")) || 10,
    handleSizeChange: handleSizeChange,
    handleChangePage: handleChangePage
  },
  editId: -1,
  editIndex: -1,
  dialog: {
    visible: false,
    title: "",
  },
  searchForm: {
    title: "",
    vcpu: "",
    memory: ""
  }
})


onMounted(() => {
  initTableData()
})

function doResetSearchForm() {
  searchFormRef.value.resetFields()
}

function doSearch() {
  state.pager.currentPage = 1
  initTableData()
}


function initTableData() {
  if (hasPermission2("applynet-list", "get")) {
    let search_params = {page: state.pager.currentPage, page_size: state.pager.perPageSize}
    for (let key in state.searchForm) {
      let value = state.searchForm[key]
      search_params[key] = value
    }
    _axios.get("/api/web/apply_net/", {params: search_params}).then((res) => {
      if (res.data.code === 0) {
        state.tableData = res.data.data.data;
        state.pager.totalCount = res.data.data.totalCount;
        state.pager.perPageSize = res.data.data.perPageSize
      } else {
        ElMessage.error("加载失败")
      }
    })
  }
}

function handleChangePage(page) {
  state.pager.currentPage = page
  initTableData()
}

function handleSizeChange(page_size) {
  localStorage.setItem("pageSize", page_size)
  state.pager.perPageSize = page_size
  state.pager.currentPage = 1
  initTableData()
}
</script>

<style scoped>

</style>